<template>
  <el-scrollbar style="height:700px">
    按钮的meta。<nfnumber v-bind="metaTable.btnCount" v-model="btnInfo.count"/>
    <el-row :gutter="10">
      <el-col :span="24">{{btnInfo.count}}{{btnInfo.moduleId}}
        <el-row :gutter="10">
          <el-col
            v-for="key in btnFormMeta.colOrder.filter(id => id !== 114020 && id !== 114120 )"
            :Key="key"
            :span="2"
            >{{getCtrMeta(key).label}}
          </el-col>
        </el-row>
        <el-row :gutter="10"
          v-for="(item) in modelButtonList.itemMeta"
          :key="'col_' + item.columId"
        >
          <el-col
            :span="2"
            v-for="(ctrId) in btnFormMeta.colOrder.filter(id => id !== 114020 && id !== 114120 )"
            :key="'form_' + ctrId"
          >
            <component
              draggable="false"
              @dragover="$event.preventDefault()"
              :is="dictControl[getCtrMeta(ctrId).controlType]"
              v-model="item[getCtrMeta(ctrId).colName]"
              v-bind="getCtrMeta(ctrId)"
            >
            </component>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="20">
        model：<br>
        "btnOrder": {{Object.keys(modelButtonList)}},
        <el-scrollbar style="height:500px">
          <jsonformat :json="modelButtonList" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'
import { installWebSQL } from '../../../../packages/websql.js'
import { formItemListKey } from '../../../control-web/nf-el-form-item/map-el-form-item.js'

// 表单的 meta
const _metaButton = reactive({
  moduleId: {
    controlId: 10001,
    colName: 'moduleId',
    label: '模块ID',
    controlType: 120,
    defValue: 100,
    placeholder: '模块ID',
    title: '模块ID'
  },
  btnCount: {
    controlId: 10002,
    colName: 'btnCount',
    label: '按钮数量',
    controlType: 120,
    defValue: 4,
    placeholder: '按钮数量',
    title: '按钮数量'
  }
})

// 获取新的字段
const getNewColumn = (id, colName, cnName, colType) => {
  const _tmp = {
    buttonId: tableInfo.moduleId + '10', // 按钮ID, int
    moduleId: tableInfo.moduleId, // 所在模块, int
    btnTitle: colName, // 按钮名称, varchar
    btnKind: 'add', // 按钮类型, varchar
    dialogTitle: cnName, // 弹窗名称, varchar
    dialogWidth: '50%', // 弹窗宽度, varchar
    controlKey: colType, // 组件名称, varchar
    openModuleId: tableInfo.moduleId, // 表单ID, int
    formMetaId: 10, // 表单的meta,
    actionId: 10, // actionId, int
    hotkey: 'a', // 快捷键, varchar
    disOrder: '1000' // 排序, int
  }
  return _tmp
}

</script>

<script setup>
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/first */
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
// 组件
import nfnumber from '/ctrl/nf-el-form-item/el-form-n-number.vue'
import jsonformat from '../json-format/json-format.vue'

/**
 * 按钮的meta
 */

// 状态
const { get, state } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()
const tableInfo = helpDataBaseMeta.tableMeta

// 列表用的 meta
const btnGirdMeta = state.platMeta[152].grid
// 表单用的 meta
const btnFormMeta = state.platMeta[152].forms['15210']

// 表单子控件
const dictControl = formItemListKey
// 依据ID获取组件的meta，因为model不支持【】嵌套
const getCtrMeta = (id) => {
  return btnFormMeta.itemMeta[id] || {}
}

// 表的meta
const metaTable = _metaButton

// 按钮的数量
const btnInfo = reactive({
  count: 4,
  moduleId: 100
})

// 按钮的数据
const modelButtonList = reactive({
  fun: () => { alert(123) },
  moduleId: 152,
  btnOrder: [11, 12, 19],
  itemMeta: {
    10: {
      buttonId: 10, // 按钮ID, int
      moduleId: tableInfo.moduleId, // 所在模块, int
      btnTitle: '添加',
      btnKind: 'add',
      dialogTitle: '添加',
      dialogWidth: '50%',
      controlKey: 'form',
      openModuleId: tableInfo.moduleId, // 表单ID, int
      formMetaId: 10,
      actionId: 10,
      hotkey: 'a'
    },
    20: {
      buttonId: 20, // 按钮ID, int
      moduleId: '', // 所在模块, int
      btnTitle: '修改',
      btnKind: 'update',
      dialogTitle: '修改',
      dialogWidth: '50%',
      controlKey: 'form',
      openModuleId: tableInfo.moduleId, // 表单ID, int
      formMetaId: 10,
      actionId: 20,
      hotkey: 's'
    },
    30: {
      buttonId: 30, // 按钮ID, int
      moduleId: tableInfo.moduleId, // 所在模块, int
      btnTitle: '删除',
      btnKind: 'add',
      dialogTitle: '删除',
      dialogWidth: '50%',
      controlKey: 'del',
      openModuleId: tableInfo.moduleId, // 表单ID, int
      formMetaId: 10,
      actionId: 30,
      hotkey: 'd'
    },
    40: {
      buttonId: 40, // 按钮ID, int
      moduleId: tableInfo.moduleId, // 所在模块, int
      btnTitle: '查看',
      btnKind: 'look',
      dialogTitle: '查看',
      dialogWidth: '75%',
      controlKey: 'list',
      openModuleId: tableInfo.moduleId, // 表单ID, int
      formMetaId: 10,
      actionId: 10,
      hotkey: 'f'
    }
  }
})

// 监听模块的变化
watch(() => tableInfo.moduleId, (id) => {
  modelButtonList.moduleId = id
  modelButtonList.btnOrder.length = 0
  for (const key in modelButtonList.itemMeta) {
    modelButtonList.itemMeta[key].moduleId = id
    modelButtonList.btnOrder.push(key)
  }
})

// 数据库
const help = installWebSQL.useHelp('nf-plat-meta')
// console.log('help', help)

// 建立表
const createTable = () => {
  const table = {}
  for (const key in modelColumList) {
    const col = modelColumList[key]
    table[col.cnName] = ''
  }
  console.log('table', table)
  help.createTable(modelTable.tableName, table)
}

// 删除表
const delTable = () => {
  help.deleteTable(modelTable.tableName)
}
</script>
